<template>
  <div>
    <button @click="onClick">按钮</button>
    <p v-color="color">Hello world!</p>
  </div>
</template>

<script>
import Vue from 'vue'

// 全局注册
Vue.directive('color', {
  // 元素插入 DOM 树
  inserted(elem, binding) {
    elem.style.color = binding.value
  },
  // 属性值发生变化
  update(elem, binding) {
    elem.style.color = binding.value
  }
})

export default {
  data: () => ({
    color: '#17f'
  }),
  methods: {
    onClick() {
      this.color = this.color === '#17f' ? 'black' : '#17f'
    }
  }
}
</script>
